<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="format-detection" content="telephone=no" />
    <title>沟通中</title>
    <link rel="stylesheet" type="text/css" href="/static/chat/chat/css/themes.css?v=2017129">
    <link rel="stylesheet" type="text/css" href="/static/chat/chat/css/h5app.css">
    <link rel="stylesheet" type="text/css" href="/static/chat/chat/fonts/iconfont.css?v=2016070717">
    <script src="/static/chat/chat/js/jquery.min.js"></script>
    <script src="/static/chat/chat/js/dist/flexible/flexible_css.debug.js"></script>
    <script src="/static/chat/chat/js/dist/flexible/flexible.debug.js"></script>
</head>
<body ontouchstart>
<div class='fui-page-group'>
    <div class='fui-page chatDetail-page'>
        <div class="chat-header flex">
            <i class="icon icon-toleft t-48"></i>
            <span class="shop-titlte t-30">商店</span>
            <span class="shop-online t-26"></span>
            <span class="into-shop">进店</span>
        </div>
        <div class="fui-content navbar" style="padding:1.2rem 0 1.35rem 0;">
            <div class="chat-content">
                <p style="display: none;text-align: center;padding-top: 0.5rem" id="more"><a>加载更多</a></p>
                <p class="chat-time"><span class="time">{$time|date="Y-m-d"}</span></p>

               <!-- <div class="chat-text section-left flex">
                    <span class="char-img" style="background-image: url(http://chat.com/static/newcj/img/123.jpg)"></span>
                    <span class="text"><i class="icon icon-sanjiao4 t-32"></i>你好</span>
                </div>

                <div class="chat-text section-right flex">
                    <span class="text"><i class="icon icon-sanjiao3 t-32"></i>你好</span>
                    <span class="char-img" style="background-image: url(http://chat.com/static/newcj/img/132.jpg)"></span>
                </div>-->

            </div>
        </div>
        <div class="fix-send flex footer-bar">
            <i class="icon icon-emoji1 t-50"></i>
            <input class="send-input t-28" maxlength="200">
            <i class="icon icon-add t-50" style="color: #888;"></i>
            <span class="send-btn">发送</span>
        </div>
    </div>
</div>
<input type="hidden" name="group_id" id="group_id" value="{$group_id}">
<input type="hidden" name="send_user_data" id="send_user_data" value="{$send_user_data}">
<script>
    var group_id = eval('('+$("#group_id").val()+')'); //组id
    var send_user_data = eval('('+$("#send_user_data").val()+')'); //发送者的信息
    var ws = new WebSocket("ws://127.0.0.1:8282");
    ws.onopen = function(){
        setInterval(sendHeart,50000); //发送心跳包
        joinGroup(group_id,send_user_data);
    };
    ws.onmessage = function(e){
        var data = eval('('+e.data+')');
        // console.log(data.type);
        // console.log(e);
        switch(data.type){
            case 'sayTextGroup':
                receiveMessage(data,send_user_data);
                return;
            // case 'sendGroupdata':
            //     console.log(data);
            //     return;
        }
    };

    function sendHeart(){
        var send_message = '{"data":"check_heart","type":"heart"}';
        ws.send(send_message);
    }
    function joinGroup(group_id,send_user_data){
        var send_message = '{"data":"'+send_user_data+'","group_id":"'+group_id+'","type":"joinGroup"}';
        ws.send(send_message);
    }
    function receiveMessage(data,send_user_data){
        console.log(data);
        console.log(send_user_data);
        if(data.send_id != send_user_data.id){
            $('.chat-content').append('<div class="chat-text section-left flex"><span><img class="char-img" src="'+data.send_head_img+'"></span><span><i class="icon icon-sanjiao3 t-32"></i>'+data['data']+'</span></div>');
        }
    }
    //点击发送
    $(".send-btn").click(function(){
        var text = $(".send-input").val();
        if(text.length == ""){
            alert("发送内容不能为空");
            return false;
        }
        // console.log(send_user_data);
        var send_message = '{"data":"'+text+'","type":"sayTextGroup","send_id":"'+send_user_data.id+'","group_id":"'+group_id+'","send_head_img":"'+send_user_data.head_img+'"}';
        $('.chat-content').append('<div class="chat-text section-right flex"><span class="text"><i class="icon icon-sanjiao3 t-32"></i>'+text+'</span><span><img class="char-img" src="'+send_user_data.head_img+'"></span></div>');
        ws.send(send_message);
        $(".t-28").val("");
    });
</script>

</body>
</html>
